Структура страницы сайта на WordPress

Чтобы сделать сайт самостоятельно, не обязательно уметь создавать структуру веб-страницы HTML-кодом. На WordPress можно сделать сайт любой сложности.

Основные элементы веб-страницы

Чёткая структура страницы сайта ― важный аспект успешности сайта в целом. Если пользователь в первый раз попал на сайт, важно, чтобы он сумел быстро найти нужную информацию, купить товар или связаться с компанией.

Если вы создаете сайт в WordPress, уделите особое внимание созданию хорошей структуры страниц. Чтобы вам было проще ориентироваться, мы расскажем по порядку про основные элементы страницы сайта на WordPress.

Header (шапка)

Header (хедер) ― это элемент в верхней части страницы:

В этом блоке могут располагаться:

― Отличительные знаки компании. Логотип, название, слоган, бренд-персонаж;

― Главное меню сайта. Только важные рубрики сайта. Чтобы упростить навигацию по сайту, в главном меню часто используют выпадающие списки;

― Контакты. Телефон, адрес, время работы;

― Поле для поиска. Это ещё одна возможность улучшить навигацию по сайту. Часто строка поиска по сайту находится в правой части шапки;

― Дополнительные кнопки. Кнопка переключения языков, входа в личный кабинет, выбора города, версия для слабовидящих;

― Корзина покупок. Обычно изображается в виде иконки.

В хедере не обязательны все перечисленные элементы. Дизайн шапки зависит от деятельности компании и выбора дизайнера. Однако такие элементы, как отличительные знаки компании и главное меню, традиционно помещают именно в хедер, так как это первое, что видит клиент при переходе на сайт.

Настроить хедер и другие элементы сайта в WordPress можно с помощью плагина Elementor.

Footer (подвал)

Footer (футер) находится в конце страницы сайта, но это отнюдь не значит, что там располагается ненужная информация. Футер, как и шапка сайта, помогает пользователю ориентироваться на сайте и содержит важные элементы:

Чаще всего в футере находится:

― Карта сайта. Это полный список всех разделов и страниц сайта. Если страниц много, то в подвале располагаются основные разделы или самые популярные статьи;

― Контактная информация. В футере может быть более подробная контактная информация и карты с местонахождением компании;

― Ссылки на социальные сети;

― Символ копирайта.

Body (тело)

Body (тело сайта) ― это основная часть страницы, где размещают контент: тексты, картинки, видео. Статья, которую вы сейчас читаете, находится в теле сайта:

Тело сайта ― это изменяемая часть страницы. Остальные элементы (шапка и подвал) остаются на всех страницах одинаковыми.

Sidebar (сайдбар)

Sidebar (cайдбар) ― это боковая панель сайта. Он может быть справа, слева или по обеим сторонам страницы:

В сайдбаре может размещаться:

― Меню навигации. Это может быть как дополнительное меню, так и основное, которое убрали из шапки сайта. У интернет-магазинов в сайдбаре могут быть фильтры;

― Списки популярных или новых статей. Актуально для новостных сайтов и блогов. Цель ― привлечь внимание к определённым статьям;

― Рекламные объявления. В сайдбарах можно расположить рекламу продуктов сайта или сторонних компаний. При этом желательно использовать сдержанные рекламные макеты, чтобы не отвлекать внимание посетителя от основной информации;

― Функциональные элементы: корзина, форма подписки;

― Ссылки на социальные сети.

Если дизайн сайта не адаптивен, то в мобильной версии sidebar может переместиться в конец страницы. Этот момент стоит учитывать при размещении информации на боковой панели.

Если header и footer ― это необходимые элементы сайта, то sidebar — нет. Этот элемент более актуален для крупных сайтов. На сайтах-одностраничниках этот элемент часто отсутствует.

Хлебные крошки

Хлебные крошки ― это навигационная цепочка, которая чаще всего находится вверху страницы. Эта цепочка обычно показывает путь от главной страницы сайта до конкретного раздела. Обратите внимание, в Базе знаний Рег.ру также используются хлебные крошки. Они отображаются над названием каждой статьи:

Хлебные крошки помогают пользователю ориентироваться на сайте. С помощью них можно вернуться на один или два раздела выше. Кроме того, использование этого элемента улучшает SEO-показатели сайта.

Виды хлебных крошек:

Хлебные крошки могут понадобиться сайтам, в которых много разделов и подразделов. Добавить хлебные крошки на сайт в WordPress можно при помощи плагинов Breadcrumb NavXT и Yoast SEO.

Внутренняя перелинковка сайта

Все страницы сайта должны быть связаны друг с другом при помощи гиперссылок. Это называется внутренняя перелинковка сайта.

Внутренняя перелинковка:

Навигационное меню в шапке, карта сайта в футере, хлебные крошки, ссылки внутри сайдбара являются элементами внутренней перелинковки.

Favicon (фавикон)

Favicon (фавикон) ― это маленькая иконка сайта, которую видно в поисковой выдаче, вкладках и рядом с URL-адресом:

Фавикон должен ассоциироваться с сайтом и выделяться среди других. Поэтому обычно в качестве фавикона используют логотип организации. Выгоднее всего выглядит значок квадратной формы.

Почему лучше использовать favicon?

Стандартные размеры фавикона: 16x16, 32x32 пикселей. Другие размеры зависят от типа устройства и операционной системы. Распространенный формат фавикона ― ICO, также доступны PNG, GIF, JPEG и SVG. Сейчас всё чаще используют формат PNG и SVG, так как многие программы не работают с ICO. Создать favicon можно в любом графическом редакторе или в онлайн-генераторе.

Чтобы установить фавикон на сайт WordPress, используйте инструкцию ниже.

Как установить фавикон сайта в Wordpress:

Как добавить JavaScript на WordPress

В статье мы расскажем, как подключить скрипт JS в тему WordPress.

Что такое JavaScript

JavaScript — это скриптовый язык программирования. Его скрипты обрабатываются не на сервере, а прямо в браузере. Это позволяет добавлять новые функции без потери скорости сайта.

Скрипт JS встроен внутрь тега </script> — он позволяет отделить написанный код JavaScript от PHP:

<script type="text/javascript">
JavaScript code
</script>

Если вы хотите добавить скрипт JS, просто разместите его на нужной странице в коде сайта. Однако если вы работаете с WordPress, разместить JavaScript на странице таким способом не получится — он удалится при сохранении пользовательского файла. О том, как обойти это ограничение, расскажем ниже.

Как добавить JavaScript на WordPress

Если вы хотите добавить JS в WordPress, выберите один из трех способов:

Выберите инструкцию, чтобы разрешить подключение скрипта WordPress.

С помощью плагина Shortcoder

Shortcoder — это плагин, с помощью которого можно создать блок кода элемента. После публикации создается специальный шаблон, который можно добавить на нужную вам страницу.

Чтобы установить Shortcoder:

Готовый шаблон вы сможете добавить на любую страницу через админку.

С помощью плагина Insert Headers and Footers

Insert Headers and Footers — это плагин, с помощью которого можно создать шаблон кода. В этом шаблоне можно обозначить, в какой части страницы должен отрабатываться скрипт.

Чтобы установить Insert Headers and Footers:

С помощью изменения файла functions.php

• ispmanager
• cPanel
• Plesk

• 1

  Кликните по файлу functions.php, наведите курсор на Редактировать и нажмите Открыть:

  

• 2

  Добавьте код и сохраните изменения, нажав Ok:

  

• 1

  Нажмите на functions.php и кликните Редактировать:

  

• 2

  Добавьте скрипт и нажмите Сохранить изменения:

  

%% 1

Кликните по functions.php, как по ссылке:

%% 2

Добавьте код и сохраните данные:

Тема для сайта на WordPress

После установки WordPress вы можете начать оформлять внешний вид вашего сайта. Можно выбрать чистый лист и создать сайт с нуля, а можно использовать готовые темы WordPress.

Тема WordPress ― что это

Тема WordPress — это набор файлов, который отвечает за внешний вид сайта.

После установки темы все ее файлы автоматически скачиваются на хостинг. Задача темы — вывод содержимого на сайт в удобном пользователю виде. С помощью темы вы можете выбрать подходящую для вас структуру сайта и вставить туда нужную информацию.

Тема WordPress:

― выводит содержимое сайта на экран;

― указывает, какой контент будет отображаться для разных пользователей;

― отвечает за адаптивность для разных устройств (монитор, смартфон и т. д.);

― использует любые элементы дизайна (картинки, видео).

В других CMS готовое оформление сайта называют шаблонами. В WordPress привычный нам шаблон называют темой, а уже внутри неё находятся шаблоны (файлы сайта). Таким образом, тема WP ― это совокупность шаблонов. Каждый файл (шаблон WordPress) отвечает за отображение определённого контента (записей, изображений) на сайте.

Из чего состоит тема WordPress

Каждый элемент сайта — это отдельный файл, загруженный на сервер. Файлы сайта дают браузеру сведения о том, как отображать информацию на экране пользователя. И когда пользователь посещает страницу на вашем сайте, WordPress загружает соответствующие шаблоны (файлы) на основе запроса.

Тема содержит два основных файла:

Любой сайт можно визуально поделить на блоки. За каждый блок будет отвечать определенный файл внутри темы. Рассмотрим основные элементы страницы:

― Шапка (header) находится в верхней части страницы. Файл header.php отвечает за вывод этой шапки.

― Футер (подвал) находится в нижней части страницы. За вывод подвала отвечает файл footer.php.

― Боковые части (виджеты). За их вывод отвечает файл sidebar.php.

Структурная схема самого простого шаблона выглядит так:

Кроме основных элементов могут быть десятки других. Все зависит от требований к сайту. Если нужен блок с комментариями, то будет использоваться файл comments.php, если на странице будут расположены посты, то файл single.php. Вариантов PHP-файлов много.

Таким образом, тема в WordPress отвечает за то, как будет выглядеть сайт для посетителя. Для добавления дополнительного функционал на сайт (опросы, форумы, оптимизация поиска) используются плагины WordPress.

Дочерняя тема

Дочерняя тема в WordPress — это дополнительная тема, которая наследует внешний вид и весь функционал родительской (исходной) темы. Вы можете вносить изменения в визуальное оформление и функционал дочерней темы, при этом родительская тема останется нетронутой. И наоборот, если разработчик внесёт изменения в родительскую тему, то настройки дочерней останутся неизменными.

Дочерняя тема Вордпресс работает на уровне файлов. Когда требуется какой-то файл для загрузки темы, Wordpress проверяет, есть ли нужный файл в дочерней теме. Если есть, используется содержимое этого файла, если нет, то загружается файл из родительской темы. Процесс создания дочерней темы требует знания и навыков создания сайта без помощи CMS. Простой способ создания дочерней темы ― это использование плагина Child Theme Configurator. Достаточно вставить ссылку на родительскую тему, и плагин сам поможет всё настроить.

Преимущества дочерних тем:

Платные и бесплатные темы

WordPress предлагает большой выбор бесплатных тем на официальном сайте. Каждая тема проходит жёсткий отбор на соответствие стандартам WordPress. Они имеют различный набор функций. Если возможностей бесплатной темы мало, то можно установить плагины. Чем сложнее сайт, тем больше дополнительных файлов придется установить.

Иногда может возникнуть конфликт между темой и плагинами, из-за чего сайт медленно грузится или даже перестает работать. В этом случае стоит использовать платные темы (премиум) WordPress, так как многие из них поддерживаются разработчиками и можно обратиться к ним за помощью.

Премиум-темы можно приобрести на сайтах разработчиков. Преимуществом таких тем является оригинальная верстка и высокая функциональность. Вам не потребуется устанавливать дополнительные плагины, которые тоже могут быть платными.

Некоторые премиум-темы можно найти в Интернете бесплатно. Однако мы настоятельно не рекомендуем их использовать. Часто код этих тем изменен третьими лицами. К тому же использовать платные темы, полученные из неофициальных источников, опасно по следующим причинам:

― Высокий риск взлома вашего сайта и кражи конфиденциальной информации.

― Темы могут содержать в себе вредоносное ПО.

― Мошенники могут сделать редиректы с вашего сайта на свой сайт или провести спам-рассылку.

Как установить тему в WordPress

В инструкции ниже мы расскажем, как подключить тему при установке WordPress. Если WordPress уже установлен, то вам поможет инструкция Как сменить тему в WordPress.

Как сменить тему в WordPress

Поменять тему в WordPress можно двумя способами:

Эффекты для WordPress

Зачем нужны плагины эффектов

Плагины WordPress — это маленькие программы, которые помогают сконфигурировать и оформить сайт перед размещением контента на нем. С их помощью можно решать многие задачи — от настройки поисковой оптимизации до добавления контактных форм и размещения интернет-магазина. Плагинами очень просто пользоваться благодаря интуитивно понятному интерфейсу.

С помощью плагинов вы можете добавить анимационные эффекты для WordPress, которые разнообразят ваш сайт. В статье мы расскажем о нескольких таких бесплатных плагинах.

Mouse cursor customizer

Плагин Mouse cursor customizer (настройщик курсора мышки) позволяет заменить стандартный курсор на любое изображение в форматах PNG, JPG и JPEG. Загрузите изображение, и пользователи вашего сайта будут видеть новый необычный курсор. На странице можно установить один вид курсора, а при наведении на ссылки или кнопки — другой. Также можно регулировать его размер.

Пример обновленного курсора ниже. Заметьте, что при наведении на ссылку он меняется:

Weather Effect

С помощью плагина Weather effect (Погодные эффекты) можно добавить на страницы сайта разные «падающие» объекты. Это могут быть погодные явления разных времен года (например снежинки, звёздочки, солнышки, капли дождя, осенние листья) или объекты, приуроченные к праздникам (валентинки, шарики, рождественские подарки). Все объекты разбиты на группы по темам: Рождество, зима, осень, весна, лето, дождь, Хэллоуин, День благодарения, День святого Валентина, Новый год. Вы можете регулировать размер объектов, их количество и скорость падения на странице сайта.

Посмотрите, как может выглядеть на вашей странице плагин WordPress Эффект воды:

Easy Textillate

Плагин Easy Textillate предназначен для анимации текста на сайте. Он очень прост в использовании. Вы добавляете какой-либо текст в окно редактирования и выбираете нужные эффекты Вордпресс. В окне предпросмотра можно сразу увидеть, как будет выглядеть анимация на сайте. При этом автоматически создается шорткод. Вам остаётся только скопировать шорткод и добавить его на страницы, в записи или виджеты сайта (например календарь, облако меток, поиск).

Плагин имеет большое количество эффектов для начальной и конечной анимации — как текст появляется на странице и как он исчезает. Вы можете использовать дополнительные опции шорткода: выбрать шрифт для текста, его цвет и размер.

Как выглядит создание анимации для текста в редакторе:

Скопируем полученный шорткод и добавим его на страницу сайта в редакторе:

А вот как выглядит результат на сайте — теперь текст стал анимированным:

Image Hover Effects Ultimate

Плагин Image Hover Effects Ultimate нужен для добавления hover-эффекта — эффекта наведения. Это значит, что при наведении курсора на изображение или текст появляется анимация.

В бесплатной версии этого плагина есть 8 различных эффектов для настройки анимации при наведении. В настройках вы можете установить любое фоновое изображение или добавить текст, который будет появляться при наведении. После этого достаточно скопировать получившийся шорткод и добавить его в любую запись на сайте или на страницу.

Рассмотрим примеры. Один из эффектов плагина — General Effects:

Эффект Flipbox Effects:

Hover Effects — easily create any hover effect

Ещё один плагин Hover Effects с 39 интересными эффектами для WordPress. Можно добавить анимацию при наведении курсора как на изображение, так и на текст.

Использовать этот плагин очень просто. Нужно навести курсор на эффект в меню плагина, чтобы посмотреть, как будет выглядеть анимация:

Затем можно нажать на понравившийся эффект. Автоматически скопируется код. Когда вы будете редактировать запись или страницу, добавьте этот код в поле «Дополнительные классы CSS»:

Пример двух разных эффектов анимации текста и изображения на сайте:

Image Hover Effects Addon for Elementor

С помощью Image Hover Effects Addon for Elementor также можно добавлять эффекты при наведении курсора. Этот плагин можно использовать, если у вас есть плагин Elementor. Например, на хостинге для WordPress он уже установлен.

С плагином Image Hover Effects Addon for Elementor можно настроить эффект анимации — при наведении курсора на изображение будет появляться текст. Начните редактировать страницу через конструктор страниц Elementor. Затем перетащите виджет Image Hover Effects, выберите вид анимации, изображение и введите текст, который будет появляться при наведении:

Пример анимации на сайте:

Button visually impaired

Button visually impaired — это плагин, который поможет настроить версию вашего сайта для слабовидящих людей. Пользователи смогут перейти на неё в один клик:

WordPress версия для слабовидящих

В версии для слабовидящих есть панель управления, которая позволяет изменить:

Синтезатор речи озвучивает любое изменение настроек. Этот функционал поможет слабовидящим пользователям выставить индивидуальные настройки, чтобы изучить содержимое сайта.

Версия сайта для слабовидящих

Плагин вордпресс для слабовидящих «Button visually impaired» можно установить и активировать в разделе «Плагины» в админке. Затем нужно настроить его отображение и сохранить изменения. Добавить плагин на страницу сайта можно с помощью шорткода, через виджеты или php.

Как добавить контактную форму в WordPress

Чтобы посетители вашего сайта могли с вами связаться, можно добавить на сайт свой номер телефона или адрес электронной почты. Пользователю придётся совершить несколько действий: набрать ваш номер или адрес, позвонить и оформить сообщение. Однако этот процесс можно упростить — добавить на сайт контактную форму обратной связи.

Обычно контактная форма состоит из нескольких полей, которые нужно заполнить. Например: «Имя», «Адрес электронной почты», «Текст сообщения». Через контактную форму пользователям будет удобнее с вами связаться: они заполнят необходимые поля и отправят форму в один клик, не нужно звонить или отправлять сообщение на email. Кроме того, посетители смогут подписаться на рассылку вашего сайта, оставить отзыв, заказать товар или услугу.

Для добавления контактных форм на сайт WordPress нужны плагины. Плагинов для добавления контактных форм для WordPress существует огромное множество, но мы расскажем о самом популярном — плагин Contact Form 7. Его установили уже более трёх миллионов пользователей, и он регулярно обновляется. После установки вы сможете добавлять на сайт формы обратной связи. Если вы хотите добавить на сайт на WordPress форму заказа, плагин Contact Form 7 также отлично подойдёт.

Шаг 1. Установите плагин Contact Form 7

Шаг 2. Создайте форму обратной связи

Шаг 3. Настройте шаблон формы

В стандартном шаблоне в форму добавлены поля «Ваше имя», «Ваш e-mail», «Тема», «Сообщение» и кнопка Отправить.

Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.

Синтаксис тега формы

Пример тега формы: [text text-name “Enter your name”]. Он состоит из четырёх частей:

Теги формы вы можете выбрать из списка и добавить их в контактную форму:

Рассмотрим поля, которые можно добавить:

Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:

Синтаксис тега почты

Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name]. Используется при настройке шаблона письма (шаг 4).

Шаг 4. Настройте шаблон письма

Если посетитель вашего сайта заполнит форму и отправит её, то на ваш электронный адрес придёт сообщение с этой формы.

Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:

Шаг 5. Настройте уведомления при отправке формы

На вкладке «Уведомления при отправке формы» вы можете настроить уведомления, которые видит посетитель в различных ситуациях.

Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение. Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».

В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.

Сохраните отредактированную форму.

Шаг 6. Добавьте форму на сайт

Капча для сайта на WordPress

В статье мы расскажем, что такое капча, какие её виды существуют и как установить капчу WordPress.

Что такое капча

Капча (от англ. CAPTCHA — Completely Automated Public Turing test to tell Computers and Humans Apart) — это тест, который позволяет отличить действия робота (компьютера или скрипта программы) от действий человека на сайте.

Основная функция капчи — защита сайта от спам-рассылок и автоматизированных действий. На сайт их обрушивают боты — они собирают личные данные, создают спам-комментарии и рассылают рекламу. Также капча может предотвратить DDoS-атаку на сайт: Что такое DDoS-атака.

Чаще всего капчу устанавливают на одну или несколько страниц сайта, которые имеют наибольшую уязвимость:

Капча может появиться во всплывающем окне при многократном повторении одинаковых действий на сайте (например, добавлении профилей в друзья).

Рассмотрим основные виды капчи, которые можно встретить в интернете.

Виды капчи

На страницы сайта капчу можно установить через специальные формы или плагины. Способ размещения зависит от того, на чём создавался ваш сайт — конструкторе сайтов или CMS. Если ваш сайт создан на CMS WordPress, капчу можно установить с помощью плагина.

Рассмотрим самые популярные плагины капчи для WordPress.

Плагины капчи для WordPress

Как правило, в WordPress CAPTCHA добавляется через плагины. С помощью плагинов можно установить любой вид капчи. Мы рассмотрим самые популярные плагины.

BulletProof Security — плагин невидимой капчи. Этот простой и эффективный инструмент не только защищает сайт от спама, но и сканирует вредоносный код и создаёт резервные копии данных. Есть три темы оформления капчи. Для максимальной защиты можно добавить дополнительный пользовательский код.

Simple Google reCAPTCHA — плагин для капчи вида «I`m not a robot». Простое решение для защиты от спам-атак. С «Simple Google» вы сможете защитить форму входа, регистрации, сброса пароля и форму комментариев. Пользователи будут видеть только компактный код без рекламы. Капча отображается только для неавторизованных пользователей.

Login No Captcha reCAPTCHA — плагин для капчи «I`m not a robot». С помощью этого плагина можно добавить простой флажок для формы регистрации и входа, а также форм сброса и восстановления пароля. «Login No Captcha» предотвращает автоматизированные сценарии и позволяет пользователям моментально продолжить работу на сайте. Как пишет Google: «Это жестко для роботов, но элементарно для людей».

Невидимая reCaptcha для WordPress — этот плагин защищает от спам-атак и готов уничтожить самую грубую атаку. Плагин хорошо подойдёт для защиты форм регистрации, авторизации, форм для комментирования и восстановления паролей. Также невидимую капчу можно добавить не только для одного сайта, но и для всей сети. Для этого дополнительно установите расширение WP Multisite.

Если вы хотите установить капчу на контактную форму Contact Form 7, установите плагин капчи для этого расширения. Вам поможет статья Как добавить капчу для Contact Form 7.

Теперь вы знаете, зачем нужна капча и какие виды капчи можно добавить на сайт WordPress.

Как добавить капчу для Сontact Form 7

Если вы в поисках оптимального плагина капчи для Contact Form 7, эта статья вам поможет. Мы рассмотрим самые популярные плагины капчи и расскажем, как добавить их на сайт WordPress. Подробнее о том, что такое капча и какие виды капчи бывают, читайте в статье Капча для сайта на WordPress.

Чтобы добавить капчу для Contact Form 7, нужно установить совместимый с ней плагин, активировать и настроить его.

Плагины капчи для Contact Form 7

Плагины капчи для Contact Form 7 — это расширения, с помощью которых можно добавить капчу для контактной формы Contact Form 7 в WordPress. Если у вас ещё не установлен плагин Contact Form 7, это можно сделать по инструкции Контактная форма WordPress.

Ниже мы рассмотрим, как настроить три популярных плагина капчи: Contact Form 7 Image Captcha, Contact Form 7 Captcha и Advanced noCaptcha & invisible captcha (v2 & v3).

Contact Form 7 Image Captcha

Contact Form 7 Image Captcha — простая капча, которая не требует от пользователя решения головоломок и угадывания сложных символов. Чтобы пройти капчу, достаточно выбрать один из трёх простых значков (например, чашку, грузовик или ель). Также можно скрыть появление капчи до момента, пока пользователь не начнёт взаимодействовать с контактной формой.

Чтобы добавить капчу на сайт:

Готово, вы добавили на сайт «Image Captcha»:

Captcha WordPress для Contact Form 7

Contact Form 7 Captcha

Contact Form 7 Captcha — надёжный плагин для reCaptcha v2 («Я не робот» и невидимая капча) от Google. Для размещения капчи на сайте нужно зарегистрироваться в Google Captcha и получить API-ключи

Чтобы добавить капчу на сайт:

Готово, вы добавили на сайт капчу «Я не робот»:

Contact Form 7 капча

CAPTCHA 4WP

CAPTCHA 4WP — платный плагин с возможностью выбора вида капчи — reCaptcha v2 («Я не робот» и невидимая капча) или v3 (которая не требует действий от пользователя). Для капчи версии v2 можно менять тему (светлая или тёмная) и размер. Капчу можно настроить для всех пользователей или только для неавторизованных. Кроме этого, можно указать количество неудачных попыток входа в систему, после которых будет всплывать капча.

Чтобы добавить капчу на сайт:

Готово, вы добавили на сайт reCAPTCHA v3:

Теперь вы знаете, какие бывают плагины капчи для контактной формы WordPress и как добавить капчу в Contact Form 7.

Как добавить форму подписки на рассылку в WordPress

В статье мы расскажем о том, что такое форма подписки на рассылку, как настроить плагины рассылок на WordPress и как добавить форму подписки на рассылку на сайт.

Что такое форма подписки на рассылку

Форма подписки на рассылку (англ. subscription form) — это функциональный блок, который можно разместить на одной или всех страницах сайта, чтобы собирать email и персональные данные посетителей. На контактную почту, которую укажет через форму пользователь, будет регулярно приходить рассылка: новости, информация о скидках и акциях компании и т.п.

Рассылка — один из наиболее эффективных методов воздействия на клиентов. С этого инструмента начинается стратегия email-маркетинга.

Как правило, форма подписки состоит из четырех элементов:

Также можно добавить поля для ввода пола и возраста, картинки, интерактивные элементы и др.

Давайте разберемся, как добавить форму подписки на рассылку в CMS WordPress.

Как добавить форму подписки на рассылку на сайт Wordpress

Добавить форму подписки на рассылку можно разными способами: самостоятельно с помощью HTML и CSS, заказать в веб-студии или у частного программиста, через сервисы создания форм подписки или через плагины подписки в CMS.

Сервисы и плагины — самый простой и удобный способ собирать email клиентов и отправлять рассылку.

Существуют десятки сервисов для создания рассылок и формы подписки. Самые популярные из них: MailChimp, SendPulse, SendSay и Sendinblue.

Также в WordPress можно добавить форму подписки не прибегая к сторонним сервисам. Для этого достаточно скачать и настроить плагин рассылок Wordpress. Самые удобные и простые в использовании плагины: MailPoet, JetPack, SendPulse и Subscribe2.

Изучим характеристики плагина MailPoet.

Основные характеристики плагина MailPoet

MailPoet — это русскоязычный плагин с интуитивно понятным управлением. В MailPoet можно создать и отправить письмо за несколько минут. Базовый набор функций работает бесплатно, но для расширения функционала можно перейти на премиум-версию.

Особенности

Ограничения

Рассмотрим, как добавить форму подписки на рассылку, с помощью плагина MailPoet.

Как добавить форму подписки на рассылку с помощью плагина MailPoet

Чтобы добавить форму подписки на рассылку в WP, выполните 4 шага:

Шаг 1. Установите плагин MailPoet

Шаг 2. Настройте плагин MailPoet

Шаг 3. Создайте форму подписки на рассылку

На странице «Формы» можно отредактировать стандартную форму или добавить новую. Рассмотрим второй вариант.

Шаг 4. Опубликуйте форму подписки на рассылку на сайте

Теперь вы знаете, как создать форму подписки на рассылку в WordPress и опубликовать ее на своем сайте.

Как создать интернет-магазин в WordPress

С каждым годом активность интернет-покупателей растет. Популярность интернет-продаж подталкивает владельцев крупного и малого бизнеса к созданию интернет-магазинов. Сложно ли самому создать интернет-магазин? Не настолько, чтобы не попробовать. Тем более мы вам поможем — расскажем по шагам, как создать интернет-магазин на Wordpress.

Если у вас еще нет домена и хостинга, быстро создать сайт на WordPress поможет инструкция Как создать сайт с нуля. Перед заказом выберите домен и хостинг: Как выбрать домен и Советы по выбору тарифа хостинга.

При выборе хостинга обратите внимание на объем дискового пространства. Если вы хотите разместить в магазине несколько десятков товаров — вам подойдет тариф из раздела «Эконом» или «Скоростные». Если в магазине будет более сотни товаров, лучше выбрать VIP-тарифы хостинга с большим объемом дискового пространства.

Плагины для интернет-магазина WordPress

WordPress ― это самая популярная CMS для создания сайтов. Создать интернет-магазин на WordPress можно с помощью плагинов. Самые популярные плагины:

Один из самых практичных плагинов онлайн-торговли — WooCommerce. Ниже мы рассмотрим его подробнее и покажем, как создать интернет-магазин с его помощью.

WooCommerce ― это плагин для WordPress, с которым можно быстро создать полноценный интернет-магазин любых размеров. Плагин написан на открытом исходном коде, что позволяет гибко управлять данными и содержимым ресурса. В WooCommerce можно улучшать магазин с помощью бесплатных расширений, применять фильтры и перехватчики для оптимизации функционала, а также модифицировать любую часть кода. Также можно выбрать и настроить разные типы товаров, способы доставки и приёма платежей.

Преимущества WooCommerce:

Вы можете активировать плагин WooCommerce для нового или уже готового сайта WordPress по нашей инструкции.

Как создать интернет-магазин на WordPress

Чтобы создать интернет-магазин на Вордпресс, установите и активируйте плагин WooCommerce. Затем настройте интернет-магазин, добавьте товары и установите дополнительный настройки для оптимизации работы магазина. Ниже мы подробно описали каждый шаг.

Шаг 1. Установите WooCommerce

Шаг 2. Настройте интернет-магазин

Сразу после активации плагина на вашем экране появится окно начальной настройки WooCommerce. Это необязательный шаг установки, так как это можно будет сделать позже в настройках плагина, но настроить некоторые параметры с помощью подсказок плагина будет проще.

Шаг 3. Добавьте товары

Шаг 4: Подключите прием платежей

Оплата онлайн ― это важный функционал для интернет-магазина. С его помощью можно оплатить покупки заранее, не используя наличных.

Для того чтобы внедрить онлайн-оплату, необходимо подать заявку на подключение интернет-эквайринга. Это можно сделать по инструкции.

Дополнительные плагины для создания интернет-магазина

Для WooCommerce созданы десятки плагинов. Они помогут не просто создать хороший интернет-магазин, а сделают его удобным и современным. На начальных этапах любому интернет-магазину надо настроить платёжную систему и сделать свой сайт видимым для поисковых систем. Для обоих функций понадобятся плагины.

Платежные системы

Fondy позволяет интернет-магазину на базе WooCommerce принимать онлайн-оплаты картой от клиентов. Плагин может: адаптировать дизайн оплаты под сайт, отражать статус платежа и заказа в личном кабинете клиента, защищать транзакции по банковским стандартам платежных систем. Плагин даёт возможность настроить регулярное списание с карты клиента (пригодится для сервисов, которые работают с подписками).

Stripe поддерживает 14 языков и более 135 валют. Доступны все основные цифровые варианты оплаты. Плагин поддерживает даже краудфандинговые проекты. Большие возможности кастомизации и высокая безопасность платёжных операций. Не требует ежемесячной оплаты, оплачивается только комиссия с транзакции.

Mollie Payments ― плагин для быстрой интеграции всех основных способов оплаты в WooCommerce. С его помощью можно принимать оплату с кредитных и дебетовых карт, а также международных платёжных систем (например, с PayPal).

SEO-оптимизация

Yoast SEO ― полезный плагин для SEO-оптимизации. С его помощью можно работать со сниппетом, контролировать «хлебные крошки», анализировать контент с точки зрения SEO и наполнять сайт ключевыми словами.

Второй по популярности плагин для SEO-оптимизации ― All in One SEO Pack. Это конкурент Yoast SEO. Он имеет схожие функции. Отличительной особенностью является расширенная поддержка для WooCommerce.

The SEO Framework по сравнению с предыдущими плагинами имеет меньше функций, но благодаря этому понятен и легок в использовании. Он способен удовлетворить все основные потребности SEO-оптимизации.

Интернет-продажи ― это отличный способ реализовывать товар. Стоимость содержания сайта в разы меньше, чем содержание офлайн-магазинов. Если у вас есть традиционные точки продаж, то интернет-магазин ― это отличная возможность увеличить охват потенциальных потребителей. WooCommerce позволит вам легко стать частью интернет-коммерции.

Gzip-сжатие в WordPress: что это, для чего нужно и как использовать

В статье вы узнаете, зачем сжимать данные на сайте, как включить сжатие gzip в WordPress и как проверить корректность его работы.

Наверняка вы хоть раз пользовались программами gzip или winRAR. Это архиваторы, которые позволяют сжимать данные (один файл или несколько) и упаковывать их в архив. В отличие от полноразмерных файлов, его можно быстро скачать или передать на другой носитель.

Рассмотрим, что это такое и как используется на сайтах.

Что такое gzip-сжатие и для чего нужно

Когда пользователь впервые попадает на сайт, его браузеру нужно загрузить все файлы, из которых состоит страница. Для этого браузер отправляет запрос на сервер, на котором расположен сайт. Сервер, в свою очередь, отдаёт в ответ запрошенные данные.

Если файлы слишком большие, пользователю приходится ждать загрузки. В этот момент он видит перед собой белую страницу или не целиком прогрузившийся контент.

Чем дольше он ждёт, тем ниже его лояльность. По исследованию Google, если страница загружается больше 3 секунд, каждый второй пользователь просто закроет страницу.

Чтобы этого избежать, владельцы сайтов используют gzip-сжатие. Это инструмент, который позволяет уменьшить размер файлов в тот момент, когда сервер отдаёт их браузеру пользователя. За счёт этого уменьшается вес страницы и увеличивается скорость загрузки.

Как работает сжатие gzip

Даже если ваш сайт написан не вручную, а создан с помощью CMS, в его составе есть HTML и CSS-коды. Именно их в совокупности с картинками и другими файлами сервер передаёт пользователям.

В структуре HTML и CSS-кода есть повторяющиеся или лишние элементы: строки со свойствами и пробелы. Утилита находит их и «сокращает» во время обмена между сервером и браузером пользователя. Таким образом, размер передаваемых файлов уменьшается и они передаются быстрее.

Утилита может сжать данные в несколько раз в зависимости от уровня (от 1 до 9). Как правило, в программах используется 3–5 уровень gzip-сжатия. Он позволяет сократить данные без потери качества и не сильно нагружает процессор.

Gzip-сжатие увеличивает скорость загрузки сайта, но создаёт дополнительную нагрузку на сервер. Как правило, мощности современных серверов хватает на сжатие даже на минимальных тарифах хостинга.

Как проверить gzip-сжатие онлайн

Большинство хостинг-провайдеров сейчас предоставляет возможность включить gzip-сжатие, и зачастую на сайтах пользователей оно работает автоматически. Однако, если сайт создавался несколько лет назад или вы замечаете проблемы со скоростью загрузки, стоит проверить, корректно ли работает сжатие.

Чтобы удостовериться, всё ли хорошо с оптимизацией сайта, воспользуйтесь бесплатными сервисами. Например, проверкой CY-PR или другой аналогичной (WebSitePlanet, GIDNetwork и т. п.).

Сервис показывает размер несжатого контента и процент сэкономленного трафика. Это результаты проверки сайта, у которого всё в порядке с gzip:

Проверка gzip-сжатия онлайн в CY-PR

А вот противоположный пример:

Если при проверке вы увидели результат, как на второй картинке, или вас не устраивает процент сжатия, ускорьте сайт по инструкции ниже.

Как включить сжатие gzip

Есть несколько способов включить эту настройку для сайта:

Первый способ более универсальный, но для реализации потребуются технические навыки и доступ к настройкам сервера.

Мы разберём более простой вариант, для начинающих. Он подойдёт в случае, если ваш сайт создан на CMS WordPress. Включить сжатие можно с помощью бесплатных плагинов.

Сжатие для WordPress

Дальнейшие действия будут зависеть от выбранного плагина.

С помощью бесплатного плагина вы сможете включить gzip-сжатие и увеличить скорость загрузки страниц. Это важный момент не только для удобства (юзабилити), но и для улучшения позиций сайта в поисковых системах. Чтобы оптимизировать сайт, наряду с gzip-сжатием, вам потребуется настройка кэширования, работа с изображениями и другие параметры.

Что такое кэширование и как управлять им в WordPress

В статье вы узнаете, что такое кэширование и для чего оно нужно, а также научитесь настраивать его в CMS WordPress.

Что такое кэширование

Кэширование — это процесс, при котором элементы сайта или страница целиком сохраняются в кэше (хранилищах быстрого доступа). Благодаря этому контент не генерируется заново для каждого посетителя, создавая нагрузку на сервер, а извлекается из кэша в готовом виде и отдаётся пользователям быстрее.

Рассмотрим на примере. На большинстве сайтов есть страница «Контакты» с адресами и телефонами офиса, email, формой обратной связи и т. д. Как правило, она меняется нечасто. То, как будет загружаться эта страница, зависит от того, включено ли на веб-сайте кэширование.

Вариант 1. Кэширование выключено

Каждый пользователь, открывший «Контакты», отправляет запрос серверу и ждёт, пока тот сгенерирует контент (хэдер, текст, карту, футер сайта). Если на страницу зайдёт 20 человек, сервер выполнит одну и ту же операцию 20 раз.

Вариант 2. Кэширование включено

Сервер преобразует все элементы страницы в HTML-файл (например, contacts.html). Когда пользователь откроет «Контакты», сервер не будет ничего генерировать заново, а просто отдаст содержимое файла contacts.html из кэша. Таким образом, один раз закэшировав данные, сервер не повторяет действия много раз.

Использование кэширования позволяет:

Как настроить кэширование сайта (WordPress)

Настроить кэширование на сайте можно с помощью плагинов/расширений CMS вашего сайта. Многие популярные плагины позволяют его настроить так же тонко, как и в ручном режиме. Ниже рассмотрим, какие решения подойдут для этого в WordPress.

Плагины кэширования WordPress

Возьмём 3 самых популярных (от 1 млн установок) бесплатных плагина для кэширования: WP Super Cache, W3 Total Cache и Autoptimize.

Мы не будем рассказывать о функциях и принципах работы каждого из них. Более подробную информацию вы сможете найти на форумах сообщества WordPress. Отметим основные моменты:

Выберите один из трёх плагинов (для начала подойдёт WP Super Cache) и следуйте инструкции ниже.

Чтобы установить и настроить плагин для кэширования WordPress:

В дополнение к кэшу сайта рекомендуем настроить браузерное кэширование для оптимизации ресурса в поисковых системах. Чтобы настроить его, пропишите необходимые условия (какие элементы будут кэшироваться и через какое время сервер будет их перезаписывать) в конфигурационном файле. Мы посвятили этому вопросу инструкцию: Настройка сжатия и кэширования через .htaccess.

Как оптимизировать изображения в WordPress

Оптимизация изображений — простой способ улучшить поисковую позицию сайта. В статье мы подробно рассмотрим, зачем сжимать картинки, что включает в себя понятие «оптимизация» и как сделать это в WordPress.

Для чего оптимизировать изображения

Изображения (картинки, фото, иллюстрации) — один из самых «тяжелых» типов контента на сайте. В зависимости от формата, количества пикселей и детализации одна картинка может весить даже десятки МБ. Это плохо для сайта.

Разберем на примере. Представьте сайт интернет-магазина с 1000 товаров. Каждый из них нужно показать покупателям, то есть сопроводить не только текстовым описанием с ценой, но и фотографией. Если размер одного изображения — 2 МБ, то все вместе они будут весить больше 2 ГБ и занимать много места на хостинге. Кроме того, из-за размера файлов страницы товаров будут грузиться медленно.

Мы уже говорили о том, какую роль играет быстродействие: никто не любит ждать. Если страница не отображается целиком дольше трех секунд, потенциальный клиент закроет вкладку и найдёт более быстрый ресурс.

Чтобы визуальный контент не занимал много места на хостинге и не замедлял веб-сайт, его нужно оптимизировать. Оптимизация изображений включает в себя широкий спектр действий, и прежде всего, сжатие (уменьшение размера).

Благодаря сжатию можно сократить изначальный вес файла вплоть до 80–90%. При этом важно не переусердствовать, ведь чрезмерная оптимизация приведет к потере качества. Изображение будет мутным, нечётким и вряд ли понравится посетителям.

Для каталога товаров в интернет-магазине оптимальный размер картинок — примерно 70–150 КБ. Если на вашем сайте меньше изображений, нужно смотреть по ситуации и скорости загрузки сайта. В среднем оптимальный вес каждого файла — 200 КБ–1 МБ).

Как оптимизировать картинки

Оптимизация изображений зависит от их типа:

Несколько наиболее распространенных способов оптимизации:

Ниже рассмотрим работу с картинками в WordPress.

Как оптимизировать изображения на сайте WordPress

В каталоге WordPress представлено более тысячи решений для работы с картинками:

Мы рассмотрим 2 самых популярных плагина: Smush (1 млн установок) и Compress JPEG & PNG Images (200 тыс. установок).

Плагины для оптимизации изображений:

Как установить и настроить плагин сжатия изображений WordPress

• Smush
• Compress JPEG & PNG Images

• 5

  Наведите курсор на раздел Smush и выберите Панель управления:

  

  При первом запуске вы сможете включить автоматическую настройку.

• 6

  На открывшейся странице в настройках включите возможность уменьшать полноразмерные изображения и нажмите Update Settings:

  

• 7

  Для оптимизации новых картинок нажмите Загрузить изображения:

  

  Добавить изображения в WordPress

• 8

  Выберите файлы (максимальный размер — 128 МБ) и загрузите их в админку:

  

  При необходимости вы можете изменить отдельный файл. Например, масштабировать изображение, прописать тег Alt (чтобы задать альтернативную текстовую надпись, если картинка не загрузится).

• 9

  Перейдите в Smush и нажмите Оптимизировать все изображения:

  

Готово, после окончания плагин покажет сэкономленное место и посоветует перейти на платную версию, чтобы улучшить результат.

• 5

  Перейдите в раздел «Плагины» и нажмите Функции в указанной строке:

  

• 6

  Введите имя и почту и нажмите Регистрация аккаунта:

  

• 7

  Перейдите в указанную почту и нажмите кнопку из письма:

  

• 8 Вернитесь в админку и обновите страницу. После активации вы сможете сжимать картинки.
• 9

  Настройте плагин и нажмите Сохранить изменения:

  

  WordPress размеры изображений

• 10 Перейдите в раздел «Медиафайлы». Выберите изображение, которое хотите сжать. Нажмите Другие детали и кликните Сжать напротив изображения, которое хотите оптимизировать.
• 11

  Также доступно массовое сжатие всех ресурсов. Для этого перейдите в подраздел «Массовая оптимизация» и нажмите указанную кнопку:

  

  Массовая оптимизация картинок WordPress

Готово, так вы сможете сжимать изображения для быстрой работы сайта.

Полезные рекомендации от PageSpeed Insights

Сжатие картинок WordPress — не единственный способ улучшения. Для SEO-оптимизации также будут полезны и другие меры. Например, перенесение всего тяжелого контента на отдельный домен и подключение CDN (Content Delivery Network). Оно позволит увеличить скорость загрузки за счет использования распределённой системы серверов. Благодаря этому, как бы далеко ни находились пользователи от исходного сервера вашего сайта, контент для них будет загружаться быстрее.

Elementor: назначение, возможности, сравнение версий

WordPress — инструмент для создания сайтов с тысячами готовых дизайнов и возможностью кастомизировать страницы. Он достаточно гибкий. Но если вам нужно что-то особенное (журнальная вёрстка или необычные формы), стандартные шаблоны не подойдут. В этом случае на выручку придет плагин Elementor. В статье расскажем о том, что он умеет и как пользоваться им, а также об отличиях платной и бесплатной версий.

Что такое Elementor

Elementor (полное название: Elementor Website Builder) — плагин WordPress, который расширяет возможности стандартного редактора. Это своеобразный конструктор сайтов, с помощью которого можно быстро и просто разработать любой дизайн страницы или отдельного блока. Elementor — очень популярное решение. К концу 2020 года его установили более 5 млн пользователей. Есть официальный сайт, посвященный Elementor, со своим блогом и сообществом разработчиков. Прежде чем перейти к возможностям плагина, посмотрите, какие сайты можно создать с его помощью:

Сделать динамичную прокрутку и анимацию, как на сайте агентства Kima

Или стильный двухколоночный лендинг, как у шеф-повара Джейд Бергер

В блоге Elementor ежегодно публикуют подборку лучших сайтов, созданных с использованием плагина.

Что умеет плагин Elementor

У плагина есть бесплатная (Elementor) и платная (Elementor Pro) версии. Они отличаются количеством доступных функций. Мы сравним их ниже, а сначала расскажем о принципе работы этого конструктора страниц.

Главная его особенность заключается в том, что в конструкторе сразу отображаются изменения, которые вы вносите. Поэтому Elementor называют визуальным редактором.

Elementor устроен по принципу Drag-and-drop. Чтобы добавить любой элемент на страницу, его нужно захватить мышкой и перетащить в зону редактирования. Страница буквально собирается из элементов. Они называются виджетами. Процесс создания страницы состоит из нескольких шагов.

Шаг 1

Переносим виджеты из меню в пустую тему и создаем структуру (можно выбрать готовый шаблон из «Галереи», но для этого нужно создать аккаунт на сайте Elementor и синхронизировать с WordPress).

«Голая» структура страницы в редакторе

Шаг 2

Редактируем каждый блок, заполняя его контентом (текст, изображения, отзывы, кнопки и т. д.).

Редактирование блока (в примере виджет «Кнопка»)

Всего инструмент содержит более 90 виджетов. Они разделены по типам: базовые, платные, общие, сайт и WooCommerce (интернет магазин на Elementor WordPress).

Рассмотрим наиболее универсальные бесплатные функции:

Виджеты платной версии содержат более продвинутый функционал:

Благодаря этим инструментам и простому интерфейсу можно собрать страницу любого типа: от простого описания услуги или статьи с фотографиями в блог до каталога интернет-магазина или сайта компании.

Страница, созданная в Elementor, будет адаптивной. Это значит, что она будет корректно отображаться не только в десктопной версии, но и на смартфонах и планшетах.

Как установить Elementor на Wordpress

Создание сайта на WordPress Elementor

Плагин встраивается в уже выбранную тему, поэтому существующий сайт не нужно переделывать с нуля.

Чтобы открыть Elementor:

Если вы хотите отредактировать уже существующую страницу, последовательность действий будет та же. Только вместо добавления новой страницы выберите в 1-м шаге нужную (в примере выше «Blog» или «Classes»), нажмите Изменить, а затем Редактировать в Elementor.

Дальше перейдем к тому, как создать сайт на WordPress Elementor.

Elementor настройка для WordPress

Настройка в Elementor позволяет назначать общие правила для всего сайта. Например, задать цветовую гамму, выбрать шрифты, фоны один раз, а не для каждого отдельного элемента и виджета. Благодаря этим настройкам ваши страницы будут единообразными. Чтобы перейти к настройке сайта в Elementor, войдите в редактор по инструкции выше. Затем нажмите на иконку с тремя полосами в левой части меню и перейдите в раздел «Настройки сайта»:

В нем есть следующие разделы:

Elementor vs Elementor Pro

Создание сайта Elementor WordPress дает большую свободу, даже если использовать плагин бесплатно. Но в версии Elementor Pro инструментов для творчества в разы больше. Для вашего удобства мы составили сравнительную таблицу двух тарифов.

В следующей статье мы рассмотрим темы для Elementor WordPress – дополнительные шаблоны, которые совместимы с этим плагином и позволяют сэкономить больше времени при создании сайта.

Тема Astra в WordPress

С помощью плагина Elementor можно собрать любую страницу с нуля. Но бывают ситуации, когда на это нет времени. Как раз для них есть другой инструмент — тема Astra в WordPress. Это шаблоны, которые можно редактировать с помощью плагина Elementor. В статье расскажем об их преимуществах, использовании, а также сравним возможности платных и бесплатных версий.

Тема Астра — что это и зачем нужно

Elementor — это конструктор сайтов в CMS WordPress. Используя виджеты, вы можете собрать и настроить внешний вид страницы вплоть до мелочей. Базовых возможностей этого плагина хватает опытным разработчикам, которые разбираются в дизайне. Новичкам же требуется больше времени и усилий для создания красивого сайта. Чтобы сэкономить их, можно приобрести Elementor Pro с 300 стильными шаблонами.

Если ресурсов на это нет, используйте бесплатную версию Astra. Это стартовые темы для блогов, интернет-магазинов и творческих портфолио. Если установить их вместе с конструктором страниц Elementor (или любыми другими аналогичными: Gutenberg, Beaver Builder и т. п.), можно взять готовую тему и быстро адаптировать ее под свои задачи.

У Astra есть ряд преимуществ:

Как настроить Astra

Как использовать шаблоны Астра

Astra — это готовый каркас (дизайн) сайта. После выбора шаблона нужно настроить его под свои нужды: изменить тексты, изображения, ссылки и т. д. Рассмотрим, как это сделать.

Сравнений версий: Astra и Astra Pro

В бесплатной версии Astra есть библиотека базовых шаблонов для новичков. Каждый из них содержит полноценный дизайн нескольких страниц, выполненных в одном стиле. Если изменить их с помощью Elementor по инструкции выше, вы получите красивый функциональный сайт.

Если же вы хотите расширить функционал Astra, вам потребуется платная версия (Pro). Вот лишь некоторые еt возможности:

Кроме версии Pro, разработчики предлагают тариф для небольшого агентства и веб-студии. Если вы делаете сайт для своего бизнеса, вам вполне хватит бесплатной версии или обычного Pro. Два других тарифа предназначены для агентств, которые предлагают свои услуги клиентам. Также вместо годовой подписки разработчики Astra предлагают заплатить за инструмент один раз и пользоваться им бесконечно. В течение 2 недель после покупки вы сможете вернуть деньги и вернуться к базовой версии.

Как установить Яндекс.Метрику на сайт в WordPress

В этой статье вы узнаете, как установить Яндекс Метрику в WordPress. Мы рассмотрим два способа: добавление с помощью плагина и вручную (в код сайта). Также разберём, как просматривать статистику после установки.

Что такое Яндекс.Метрика и зачем она нужна

Яндекс.Метрика — это бесплатный инструмент аналитики, который позволяет изучить поведение посетителей сайта. Благодаря ему вы узнаете:

Также в Яндекс.Метрику входит инструмент Вебвизор. Он позволяет посмотреть видеозаписи сеансов пользователей: клики, движение мыши, заполнение форм. Эта информация поможет проанализировать удобство интерфейса (UX) и найти ошибки в структуре.

Установка Яндекс Метрики на WordPress состоит из двух этапов:

Этап 1. Установка счётчика

О 1-м этапе мы подробно рассказывали в инструкции. Кратко повторим ещё раз:

Перейдите на страницу и задайте все необходимые настройки по аналогии. Затем нажмите Создать счётчик:

Этап 2. Как добавить Яндекс Метрику на сайт WordPress

Есть два способа добавить счётчик в WordPress:

Способ 1. Как поставить Метрику на Вордпресс через плагин

Способ 2. Как установить счетчик Метрики на сайт WordPress через код

Второй способ установки заключается в добавлении в шаблон сайта кода счётчика.

Как просматривать данные Яндекс.Метрики

После установки счётчика подождите несколько дней или недель, пока данные накопятся.

Чтобы перейти к аналитике, перейдите на страницу счётчика в Яндекс и нажмите на его название:

Откроется страница «Сводка» с графиками:

Здесь же вы можете установить интересующие вас временные промежутки: статистика за день, неделю, месяц, квартал, год или произвольный период:

Нажав на меню слева, вы можете перейти в другие разделы:

Как установить Google Analytics на сайт WordPress

Узнайте, как установить счетчик Google Analytics на сайт. В статье рассматриваются установка кода и плагинов в WordPress.

Для чего нужен счетчик Google Analytics

Google Analytics (или Google Аналитика) — сервис для сбора статистики о сайте. С помощью этого инструмента можно узнать:

В Google Analytics есть бесплатная версия с большим набором функций. Её будет достаточно даже для сложного масштабного проекта. Чтобы начать пользоваться Google Analytics, нужно зарегистрировать аккаунт и установить на сайт счётчик (JavaScript-код).

Как зарегистрировать аккаунт Google Analytics

Как получить код счетчика

Как установить счетчик Google Analytics на сайт

Мы рассмотрим два способа добавления счетчика на сайт с WordPress:

1) установка с помощью плагина,

2) добавление кода в тему сайта.

Способ 1. Установка с помощью плагина

Способ 2. Установка кода Google Analytics

Чтобы установить счетчик напрямую в код сайта WordPress:

После установки счетчика Google Analytics вы сможете собирать статистику в режиме реального времени. Мы рекомендуем использовать инструмент Google вместе со счётчиком Яндекс.Метрика. Это снизит риск того, что вы потеряете аналитические данные, если он из счетчиков выйдет из строя. Подробнее об установке Яндекс.Метрики.

Как сделать бэкап сайта на WordPress

В статье вы узнаете, что такое бэкап сайта, зачем он нужен и как сделать его в WordPress с помощью трех разных плагинов. Эта инструкция подойдет вам, если вы хотите самостоятельно сделать резервные копии и восстановить нужную версию сайта.

Зачем нужны бэкапы

Бэкап — резервная копия всех файлов сайта (контента и базы данных). При создании бэкапа вы получаете архив с данными, который можно хранить на локальном диске, сервере или в облачном хранилище. Бэкапы применяются для решения следующих задач:

Абсолютное большинство провайдеров автоматически делают бэкапы сайтов, размещенных на их серверах. От конкретного поставщика зависит время создания копии, ограничения и срок хранения. Например, бэкапы в Рег.ру создаются ночью в 24:00 по московскому времени и хранятся 30 дней. Файлы больше 300 Мб не попадают в резервную копию.

Во многих случаях автоматических бэкапов будет достаточно. Но если они нужны срочно или требуется конкретная версия (например, сайт часто обновляется) — лучше позаботиться о резервных копиях самостоятельно. Есть два способа сделать бэкап: «по старинке» (вручную скопировать файлы и импортировать БД через phpmyadmin) и с помощью плагинов. В этой статье рассмотрим, как сделать копию сайта на WordPress вторым способом. Подробнее о первом мы рассказывали в статьях:

Резервное копирование WordPress

В WordPress есть более 1,5 тыс. плагинов, предназначенных для создания бэкапов:

WordPress backup plugin

Функционал и удобство использования в них разнятся. Одни много весят и грузят админку. Другие не позволяют восстанавливать сайт из скачанного бэкапа на бесплатном тарифе.

Мы выбрали золотую середину. Три плагина для резервного копирования, которые достаточно популярны, просты в использовании и в которых достаточно функционала бесплатной версии.

Плагины для создания backup WordPress

All-in-One WP Migration

All-in-One WP Migration — простой плагин, переведенный на русский, который позволяет сделать резервную копию всего сайта в WordPress, включая не только медиа и базу данных, но и тему и используемые плагины. Для того чтобы им воспользоваться не нужно технических знаний, достаточно создать бэкап, затем скачать его на компьютер и загрузить в административной панели (импортировать копию).

Особенности бесплатной версии

Особенности платной версии

Таким образом, плагин подойдет для небольших сайтов, которые редко обновляются (например: портфолио, лендингов, визиток).

BackWPup

BackWPup — более гибкий плагин для создания бэкапов и планирования заданий. Отметим, что для восстановления резервных копий придется воспользоваться phpMyAdmin.

Особенности бесплатной версии

Особенности платной версии

Таким образом, плагин подойдет более технически подкованным владельцам сайтов. А также в том случае, если вы хотите, чтобы резервные копии создавались периодически без вашего участия.

UpdraftPlus — Backup/Restore

UpdraftPlus WordPress Backup Plugin — популярный плагин для создания бэкапов и восстановления из них.

Особенности бесплатной версии

Особенности платной версии

Этот плагин универсален и достаточно прост в использовании.

Как сделать резервную копию сайта на WordPress

Мы рассмотрели, как создать резервную копию сайта WordPress. Указанные выше плагины подойдут для этого. С помощью All-in-One и UpdraftPlus вы также сможете восстановить сайт из созданной резервной копии.

Если создание бэкапов интересует вас, потому что вы собираетесь перенести сайт между доменами или на другой хостинг, бесплатных функций плагинов будет недостаточно. Мы рекомендуем обратиться к специалистам техподдержки.

Как ускорить сайт в WordPress

Современные сайты должны быть не только стильными, лаконичными и понятными, но и быстрыми. Если ваш веб-ресурс отстает хотя бы по одному из этих критериев — это отразится на лояльности посетителей и в конечном счете на выручке. В статье расскажем, как ускорить сайт, созданный на WordPress.

Что такое скорость загрузки сайта

Когда мы открываем сайт в браузере, проходит какое-то время, прежде чем контент на странице целиком загрузится. Это может происходить очень быстро: 1–2 секунды, и тогда нам кажется, что всё открылось мгновенно. А может дольше – от 5 секунд. Тогда мы понимаем, с сайтом что-то не так и, скорее всего, закроем его, чтобы не тратить своё время.

С технической точки зрения загрузка сайта состоит из нескольких этапов. Чем меньше занимает каждый из них — тем выше итоговая скорость.

Ускорение загрузки сайта заключается в том, чтобы проработать каждый из этих этапов: оптимизировать код и серверные параметры.

Зачем нужно ускорять сайты

Скорость загрузки влияет не только на UX (восприятие пользователями), но и на ранжирование в поисковых сетях. Рассмотрим подробнее.

Если сайт грузится дольше 3 секунд:

Как узнать скорость загрузки сайта

Определить скорость загрузки сайта можно по-разному:

Если вы начинающий веб-мастер и не готовы тратить время на то, чтобы разобраться, можно оценить скорость загрузки визуально.

Откройте сайт с нескольких разных устройств с автономным соединением. Если на одном страница загрузилась быстро, а на другом — медленно, вероятно, дело не в самом сайте, а в скорости интернета.

Также стоит помнить о том, что мобильная и полная (десктопная) версия сайта загружаются с разной скоростью. Если на компьютере всё открывается быстро, это не гарантирует того, что и на смартфоне будет то же самое. С учётом того, что всё больше людей сидят в интернете со смартфонов — скорости мобильной версии нужно уделить особое внимание.

Как повысить скорость сайта

Если сайт открывается недостаточно быстро, мы рекомендуем провести аудит по следующим параметрам:

Разберем, как именно они влияют и как можно их улучшить.

1. Структура сайта → оптимизировать

Как говорилось выше, сначала сервер отдаёт браузеру HTML-страницу (структуру) и только потом загружает внешние файлы (изображения, стили, скрипты). Если в начале HTML-кода подключены другие файлы, они блокируют его загрузку. Сервер, встретив их, не может вернуться к ним позже, после того, как прогрузит структуру. Он начинает обрабатывать другие запросы — и в результате скорость загрузки снижается.

Чтобы этого не происходило, начало кода должно содержать только те данные, которые нужны для первичной/основной прорисовки контента. Загрузку всех второстепенных внешних CSS и JS нужно отложить (разместить в конце кода).

Это можно сделать вручную или с помощью плагинов WordPress.

2. HTTP-запросы → сократить количество

Каждый файл, из которого состоит код страницы, загружается с помощью отдельного HTTP-запроса. Чем их больше, тем медленнее работает сайт.

Чтобы сократить количество файлов, их можно объединить. Для этого откройте любой текстовый редактор и последовательно вставьте код каждого файла в том порядке, в каком они влияют на контент. В идеале вместо большого количества отдельных .css- и .js-файлов, для каждой страницы должен быть один основной.

3. CSS и JS → минимизировать

Чем больше лишних незначительных элементов (пробелов, переносов строк) в коде, тем медленнее он загружается. Чтобы убрать их, можно воспользоваться онлайн-сервисами CSS Minifier, JavaScript Compression Tool и т. п. Просто загрузите файл, и инструменты автоматически очистят код от лишних знаков и таким образом оптимизируют их.

4. Изображения → оптимизировать

Оптимизация скорости загрузки сайта во многом зависит от того, сколько весят изображения, ведь это самый тяжёлый тип контента (в сравнении с текстовыми кодами и динамическими скриптами). Мы посвятили работе с изображениями отдельную инструкцию.

5. Версия php → обновить

Если версия php, установленная для вашего сайта, устарела, это тоже может замедлять скорость обработки скриптов. Сейчас повсеместно используются 7.1–7.4. Узнать и изменить версию php на хостинге можно с помощью инструкции.

6. Кэширование → включить

Кэширование — позволяет экономить время на обработку запросов. Так, если оно включено, сервер просто отдаёт браузерам пользователей файлы из кэша, а не генерирует их каждый раз заново. Мы рассказывали о том, как включить кэширование с помощью плагинов WordPress и в файле .htaccess.

7. Gzip-сжатие → настроить

На хостинге Рег.ру по умолчанию включено сжатие для статичных файлов. Подробнее о настройках gzip можно узнать в статье.

8. Хостинг → увеличить тариф

Иногда медленная загрузка сайта — сигнал того, что вы исчерпали возможности вашего тарифа. Если сайт популярен и его посещают тысячи пользователей, а вы используете тариф с низким CPU, сервер просто не справляется с обработкой запросов. Мы рекомендуем выбирать VIP-тарифы с максимальными параметрами CPU. Читайте о том, как изменить тариф, в инструкции.

Как ускорить загрузку сайта на WordPress

Если ваш сайт создан на CMS WordPress для оптимизации скорости загрузки можно использовать плагины. Они помогут улучшить некоторые моменты (например, настроить асинхронную загрузку скриптов) автоматически.

WordPress — оптимизация загрузки сайта

Мы выбрали 2 популярных плагина, которые комплексно решают проблему скорости: PageSpeed Ninja и Autoptimize.

Рассмотрим, как установить их в административной панели и что делать потом.

В этой статье мы рассмотрели ускорение сайта на WordPress. Это довольно сложная техническая тема с большим количеством нюансов. Поэтому по вопросам оптимизации лучше обращаться к разработчикам сайта или в SEO-агентства, которые предлагают технические аудиты скорости загрузки.

Редирект в WordPress

Узнайте, какими бывают редиректы, зачем они используются и как настроить в WordPress redirect с помощью плагинов или через конфигурационный файл.

Что такое редирект

Редирект — это перенаправление между страницами в браузере. Когда на сайте настроен редирект, посетители автоматически попадают с исходного URL, который они вводят в адресную строку, на новый адрес. Например:

site.ru → newsite.ru

Редирект можно настраивать не только между двумя разными сайтами, но и для переадресации со страниц и каталогов внутри одного сайта.

Для чего нужен редирект

Редиректы играют важную роль в SEO-оптимизации (Search Engine Optimization). После создания и публикации сайта в интернете владельцу нужно позаботиться о том, чтобы на него заходило как можно больше пользователей. Повысить посещаемость можно за счет SEO-оптимизации.

Что включает SEO-оптимизация

SEO-оптимизация — это комплекс действий с сайтом, которые улучшают его позицию в поисковых системах (самыми популярными на территории России являются Яндекс и Google).

Чтобы улучшить поисковую позицию, нужно:

• наполнять тексты ключевыми словами по тематике бизнеса;
• публиковать качественный контент;
• увеличивать скорость загрузки. Если пользователи ждут загрузки больше пары секунд, они покидают страницу. Это негативно влияет на SEO-показатели;
• наращивать ссылочный профиль. Договариваться, чтобы другие авторитетные ресурсы ссылались на ваш сайт;
• оптимизировать HTML-код. Структурировать страницы с помощью заголовков H1–H6, заполнять теги Title и Description, использовать микроразметку и сниппеты;
• настраивать адаптивные (мобильные) версии. Сайт должен корректно отображаться на смартфонах и планшетах.

Мы перечислили некоторые методы SEO-оптимизации. В этой теме много нюансов, поэтому для продвижения конкретного сайта следует консультироваться со специалистами. Если вы собираетесь заниматься SEO самостоятельно, рекомендуем подписаться на тематические блоги или пройти обучающие курсы.

Со временем при грамотной работе с SEO сайт зарабатывает высокую позицию в поисковой выдаче. Иными словами, пользователи, которые ищут услуги вашего профиля, видят ваш сайт вверху результатов поиска:

Если ресурс заработал высокую позицию, за ней нужно следить, иначе сайт будет терять посетителей, а бизнес — клиентов. Но иногда возникает потребность в действиях, которые вредят SEO-оптимизации. Например, когда ресурс нужно перенести на другой домен (при ребрендинге или если вы не продлили домен, и его зарегистрировал другой человек). Если просто привязать новый домен в панели управления, случится «SEO-катастрофа»: сайт потеряет поисковый трафик, и придется заниматься продвижением с нуля. Ситуацию исправит редирект — благодаря нему можно «связать» старый и новый домены и сохранить накопленный трафик.

Другая причина для использования редиректов связана с тем, что пользователи часто добавляют сайты в закладки. Это позволяет быстрее открывать страницы, а не вводить адрес сайта при каждом посещении. Если у сайта или страницы изменится адрес, а редирект не будет настроен, пользователь увидит ошибку «Страница не существует/не найдена.

Также без редиректа не обойтись в следующих случаях:

Типы редиректов

Всего есть 9 типов, они отличаются назначением. Поисковые системы анализируют данные протокола HTTP и в зависимости от этого определяют, какой вид редиректа используется. Подробнее о типах редиректов вы можете почитать в нашей статье.

Наиболее распространенные типы:

Как сделать 301 редирект WordPress

На сайте, который создан с помощью CMS WordPress, постоянный редирект можно настроить 2-мя способами:

Единичные редиректы с одной страницы на другую оптимально настраивать с помощью плагина, а массовое перенаправление всех страниц с одного сайта на другой — через директиву в конфигурационном файле.

В инструкции ниже рассмотрим, как сделать 301-й редирект в WordPress с помощью плагина и вручную в файле .htaccess.

WordPress: редирект на другую страницу с помощью плагина Redirection

Redirection — бесплатный плагин, который используют более 2 млн веб-разработчиков. Redirection позволяет:

Чтобы настроить редирект с помощью плагина:

WordPress: редирект на другой сайт в .htaccess

.htaccess — конфигурационный файл для веб-сервера Apache (используются на хостинге Рег.ру). Файл .htaccess располагается в корневой папке сайта. С помощью него можно:

Чтобы настроить постоянный редирект на другой сайт:

Мы рассмотрели настройку редиректов с помощью плагина и конфигурационного файла. Не забывайте о перенаправлениях при любых значимых действиях с URL-адресами вашего сайта. Если не сделать этого, вы потеряете посетителей сайта и позицию в поисковой выдаче.

Кроме непосредственной настройки редиректов, мы рекомендуем пользоваться Яндекс.Вебмастер и Google Search Console. Эти инструменты предназначены для того, чтобы работать с поисковыми системами и отслеживать основные SEO-показатели сайта.

Как войти в админку WordPress

В этой статье мы расскажем, как зайти в админку WordPress. А также рассмотрим, как совершить вход в админку WordPress, если вы забыли пароль, и другие возможные проблемы с авторизацией.

Как войти в админку WordPress

Войти на сайт как администратор можно 2-мя способами: через поисковую строку браузера или через настройку кнопки входа на сайте. Ниже мы описали оба способа, однако вход через браузер является более правильным и безопасным.

Способ 1. Через браузер

Способ 2. Через кнопку в шапке сайта

Чтобы заходить в админку через кнопку в шапке сайта, её предварительно нужно добавить в меню сайта. Для этого:

Теперь вы можете заходить в панель управления через шапку сайта:

Как войти в панель управления WordPress, если вы забыли пароль

Если вы забыли пароль от панели управления WordPress, его можно сбросить в хостинг-панели в разделе «Базы данных» (phpMyAdmin). Как это сделать, мы описали в статье.

Как изменить пароль для входа в админку WordPress

Если у вас есть доступ в админку и вы хотите изменить пароль, используйте один из двух способов: через браузер или через панель инструментов.

Способ 1. Через браузер

Способ 2. Через панель инструментов

Ещё один вариант смены пароля, если есть доступ в панель управления — это использовать панель инструментов. Для этого:

Возможные проблемы при входе в админку WordPress

Бывают случаи, что при вводе логина и пароля возникает ошибка или страница многократно перезагружается. Ниже мы расскажем об основных причинах такой проблемы.